<template>
  <views class="enterprise_gen_batch">
    <div>
      <div class="enterprise_office_personlist_1">
        <viewTitle :title="'使用流程'" :border="true"></viewTitle>
        <!-- <div class="record_type flex flexR center">
          <div class="input-title Textl">所属服务商:</div>
          <el-select v-model="all.form.service_name" clearable placeholder="请选择">
            <el-option
              v-for="item in all.form.service_provider"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div> -->
        <div class="upload_btn">
          <el-button  @click="downxlsx">批量导入模板下载</el-button>
          <div class="title">
            第一步、点击【批量代发模板】下载Excel表格模板，将下载好的模板按照模板内的【填写说明】进行填写。
          </div>
        </div>
        <el-upload
          class="upload-demo uploading_list upload_btn"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :file-list="all.form.fileList"
          :on-change="changeFile"
          :multiple="false"
          :limit="1"
          accept=".xls, .xlsx"
          :auto-upload="false"
        >
          <el-button slot="trigger" type="primary">选取文件</el-button>
          <div class="title">
            第一步、点击【批量代发模板】下载Excel表格模板，将下载好的模板按照模板内的【填写说明】进行填写。
          </div>

        </el-upload>
        <div class="upload_btn">
          <el-button
                  type="success"
                  @click="submitUpload"
          >上传到服务器</el-button>
          <div class="title">
            第三步、点击【上传到服务器】，将已选定的Eexcel表格进行上传，完成批量代发信息导入流程。
          </div>
        </div>

        <div slot="tip" class="el-upload__tip upload_tip">只能上传.xls/.xlsx文件，且不超过500kb</div>
      </div>

      <div class="Import_prompt">
        <viewTitle :title="'批量导入指导'" :border="true"></viewTitle>
        <div class="Import_prompt_list flex">
          <div class="prompt_lists flex flexC">
            <div>第一步、点击【批量代发模板】下载Excel表格模板，将下载好的模板按照模板内的【填写说明】进行填写。</div>
            <div>第二步、点击【选取文件】，找到已填写完并已保存的【批量代发Excel表格】并选定该文件。</div>
            <div>第三步、点击【上传到服务器】，将已选定的Eexcel表格进行上传，完成批量代发信息导入流程。</div>
            <!--<div>第四步、《待定》</div>-->
            <div class="notice">注：批量录入时请务必输入准确的人员信息（真实姓名、身份证号、银行卡号），否则会导致代发失败。</div>
          </div>
        </div>
      </div>
    </div>
  </views>
</template>

<script>
export default {
  data() {
    return {
      all: {
        form: {
          service_provider: [], // 服务商列表
          service_name: "",
          fileList: [], //  上传文件列表
          action_url: "" //  上传文件地址
        }
      },
      downxlsxurl:"http://suichou.zhuoyankeji.com/template/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
    };
  },
  methods: {
    downxlsx(){
      window.open(this.downxlsxurl);
    },
    submitUpload() {
      let list = this.all.form.fileList || [];
      if (list.length == 0) {
        this.$message({
          message: "你选择上传的文件",
          type: "warning"
        });
        return;
      }
      var formData = new FormData();
       formData.append("token", this.$store.state.token);
       formData.append("file", this.all.form.fileList[0]);
       this.$api.upload('/Enterprise/uploadOrder',formData).then(response=>{
            //console.log("上传成功返回",response)
           if(response.code != 200){
               this.$message.error(response.msg);
           }else{
               this.$message.success(response.msg);
           }

      })

    },
    //点击文件列表中已上传的文件时的钩子
    handlePreview(file) {},
    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {},
    //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除
    beforeRemove(file, fileList) {
      this.all.form.fileList = [];
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {},
    // 文件发生改变
    changeFile(file) {
      this.all.form.fileList[0] = file.raw || {};
    }
  },
  mounted() {},
  created() {}
};
</script>


<style lang="less"  :scope="true"  src="@/style/issuing/enterprise_gen_batch.less" >
</style>
